<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="物美价廉，品质有保障">
  <meta name="description" content="物美价廉，品质有保障">
  <title>确认订单</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./assets/slick/slick.css">
  <link rel="stylesheet" href="./css/index.css">
  <script type="text/javascript" src="js/main.js"></script>


  <script src="js/axios.min.js"></script>
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
</head>

<style>

  .shortcut .wrapper ul li:hover a{
    color: #c81623;
  }

  .shortcut .wrapper ul li a {
    font-size: 14px;
    color: #fff;
  }

  .shortcut .wrapper ul li:hover::after{
    color: #c81623;
  }

  /*顶部标签*/
  .nav{
    margin-left: 160px;

  }

  /*.nav li {*/
  /*    margin-left: 20px;*/
  /*}*/

  /*!* 下拉内容（默认隐藏） *!*/
  /*.nav2 {*/
  /*    display: none;*/
  /*    position: absolute;*/
  /*    background-color: #f9f9f9;*/
  /*    width: 120px;*/
  /*    height: 100px;*/
  /*    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  /*    z-index: 1;*/
  /*    margin-top: 23px;*/
  /*}*/

  /*!* 下拉链接 *!*/
  /*.nav2 a {*/
  /*    color: black;*/
  /*    padding: 12px 16px;*/
  /*    text-decoration: none;*/
  /*    display: block;*/
  /*    margin-top: 10px;*/
  /*}*/

  /*!* 悬停时更改下拉链接的颜色 *!*/
  /*.nav2 a:hover {background-color: #f1f1f1}*/

  /*!* 悬停时显示下拉菜单 *!*/
  /*.nav1:hover .nav2 {*/
  /*    display: block;*/
  /*}*/


  /*!* 下拉内容（默认隐藏） *!*/
  /*.nav4 {*/
  /*    display: none;*/
  /*    position: absolute;*/
  /*    background-color: #f9f9f9;*/
  /*    width: 120px;*/
  /*    height: 100px;*/
  /*    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  /*    z-index: 1;*/
  /*    margin-top: 23px;*/
  /*}*/

  /*!* 下拉链接 *!*/
  /*.nav4 a {*/
  /*    color: black;*/
  /*    padding: 12px 16px;*/
  /*    text-decoration: none;*/
  /*    display: block;*/
  /*    margin-top: 10px;*/
  /*}*/

  /*!* 悬停时更改下拉链接的颜色 *!*/
  /*.nav4 a:hover {background-color: #f1f1f1}*/

  /*!* 悬停时显示下拉菜单 *!*/
  /*.nav3:hover .nav4 {*/
  /*    display: block;*/
  /*}*/

  /*!* 下拉内容（默认隐藏） *!*/
  /*.nav6 {*/
  /*    display: none;*/
  /*    position: absolute;*/
  /*    background-color: #f9f9f9;*/
  /*    width: 120px;*/
  /*    height: 100px;*/
  /*    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  /*    z-index: 1;*/
  /*    margin-top: 23px;*/
  /*}*/

  /*!* 下拉链接 *!*/
  /*.nav6 a {*/
  /*    color: black;*/
  /*    padding: 12px 16px;*/
  /*    text-decoration: none;*/
  /*    display: block;*/
  /*    margin-top: 10px;*/
  /*}*/

  /*!* 悬停时更改下拉链接的颜色 *!*/
  /*.nav6 a:hover {background-color: #f1f1f1}*/

  /*!* 悬停时显示下拉菜单 *!*/
  /*.nav5:hover .nav6 {*/
  /*    display: block;*/
  /*}*/

  .image {
    width: 100%;
    display: block;
  }

  #top-search{
    height: 26px;
    border: none;
    width: 630px;
    padding: 5px 0px 6px 16px;
    margin-top: 5px;
    margin-left: 3px;

  }

  #from-search{
    height: 37px;
    width: 690px;
    margin-left: 430px;
    margin-top: 20px;
    display: inline-block;
    border-radius: 15px;
    border: 1px solid black;

  }

  #from-search a{
    background: url(images/search.png) no-repeat 5px center;/*5px -->离左边距离  center:上下*/
    background-size: 20px 20px;
    height: 19px;
    display: inline-block;
    padding-bottom: 25px;

  }
  #from-search a span{
    visibility: hidden;
  }
  /*鼠标悬停在a标签上样式的效果*/
  #from-search a:hover{
    background: url(images/search_black.png) no-repeat 6px center;/*5px -->离左边距离  center:上下*/;
    background-size: 20px 20px;
  }
  #header{
    margin-top: 10px;
  }

  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
    margin: 8px;
    width: 230px;
    height: 310px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 6px 6px;
    background-color: #f9fafc;
    margin-bottom: 10px;
    height: 310px;
  }
  .el-card__body{
    height: 310px;
  }

  .banner{
    background-color: white;
    height: auto;
  }

  .goods{
    margin-top: 50px;
  }
  .el-step__description{
    font-size: 16px;
    line-height: 20px;
    margin-top: 8px;
    font-weight: 700;
  }

  #middle{
    margin: auto;
    width: 1024px;
  }


  #receiveaddress-border {
    border: 1px solid black;
    width: 237px;
    height: 105px;
    float: left;
    margin-left: 10px;
  }
  #receiveaddress{
    height: 140px;
  }

  #add-address{
  }
  #manage-address{
    margin-left: 10px;
  }

  #orderMessage{
    margin-top: 20px;
  }

  #commit-order{
    margin-top: 20px;
    text-align: right;
  }


</style>
<body>
<!-- 快捷导航栏区域 -->
<div id="app">

  <div class="shortcut" >
    <div class="wrapper">
      <ul>
        <li class="nav1"><a :href="'index.html?uid='+uid" >我的万宝</a>
          <!--                <div class="nav2">-->
          <!--                    <div><a href="#">服务流程</a></div>-->
          <!--                    <div><a href="#">开店时间</a></div>-->
          <!--                </div>-->
        </li>
        <li><a href="" >购物车</a></li>
        <!--                <div class="nav4">-->
        <!--                    <div><a href="#">收藏的宝贝</a></div>-->
        <!--                    <div><a href="#">收藏的店铺</a></div>-->
        <!--                </div>-->
        </li>
        <li><a :href="'ProductCategory.html?uid='+uid" >商品分类</a></li>
        <li class="nav5"><a href="#" >联系客服</a>
          <!--                <div class="nav6">-->
          <!--                    <div><a href="#">消费者客服</a></div>-->
          <!--                    <div><a href="#">卖家客服</a></div>-->
          <!--                    <div><a href="#">意见反馈</a></div>-->
          <!--                </div>-->
        </li>
        <li><a :href="'PersonalCenter.html?uid='+uid">个人信息</a></li>
      </ul>
    </div>
  </div>




  <!-- banner区域 -->
  <div class="banner">
    <div id="middle">
      <h1 style="font-size: 56px;float: left;padding-top: 28px;height: 64px;line-height: 64px">万宝商城</h1>
      <div style="margin-left: 400px;padding-top: 28px">
        <el-steps :active="activeValue" align-center space="160px" >
          <el-step title="步骤1" description="拍下商品" ></el-step>
          <el-step title="步骤2" description="付款到支付宝"></el-step>
          <el-step title="步骤3" description="确认收货"></el-step>
          <el-step title="步骤4" description="评价"></el-step>
        </el-steps>
      </div>
      <div id="receiveaddress">
        <h3 style="margin-left: 10px">收货地址</h3>
        <div id="receiveaddress-border" v-for="address in addressData" @click="selectShoppingId(address.shoppingid)" style="cursor: pointer" >
          <div id="receivename address">{{address.receiverprovince}} ({{address.uname}}收)</div>
          <div id="address">收货地址:{{address.receiveraddress}}</div>
          <div id="phone">电话号码:{{address.receiverphone}}</div>
        </div>
      </div>
      <div id="manage-address">
        <div id="add-address">
          <el-button class="btn-add" type="mini" @click="create"><span>添加新地址</span></el-button>
        </div>
        <div>
          <!--                    <el-button class="bun-rem" type="mini" @click="remove">管理地址</el-button>-->
        </div>
      </div>

      <div id="orderMessage">
        <div class="location">确认订单信息<span></span></div>
        <el-table :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                  stripe
                  class="title"
                  :data="tableData"
                  @selection-change="handleSelectionChange">


          <el-table-column prop="image" label="图片">
            <template slot-scope="scope">
              <el-image
                      style="width: 100px; height: 100px"
                      :src="scope.row.image"
                      fit="contiain">
              </el-image>
            </template>
          </el-table-column>

          <el-table-column prop="proname" label="商品名称"></el-table-column>

          <el-table-column prop="price" label="商品价格">
            <template slot-scope="scope">
              <span>{{scope.row.price}}元</span>
            </template>
          </el-table-column>

          <el-table-column prop="num" label="数量">
            <template slot-scope="scope">
              <span >{{num}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="price" label="价格">
            <template slot-scope="scope">
              <span >{{scope.row.price*num}}元</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div id="commit-order">
        实付款:{{totalPrice}}
        <el-button type="primary" @click="createPay">提交订单</el-button>
      </div>


    </div>
  </div>

  <div class="footer">
    <div class="wrapper">
      <div class="top">
        <ul>
          <li><span>价格亲民</span></li>
          <li><span>价格亲民</span></li>
          <li><span>价格亲民</span></li>
        </ul>
      </div>
      <div class="bottom">
        <p>
          <a href="#">关于我们</a>|
          <a href="#">关于我们</a>|
          <a href="#">关于我们</a>|
          <a href="#">关于我们</a>|
          <a href="#">关于我们</a>|
          <a href="#">关于我们</a>|
          <a href="#">关于我们</a>|
        </p>
        <p>CopyRight @ 小兔鲜儿"</p>
      </div>
    </div>
  </div>
<!-- 用户地址添加 -->
  <el-dialog title="地址添加" :visible.sync="dialogFormVisible"  :close-on-click-modal = "false">
    <div style="display: flex; justify-content: space-around;" >
      <el-form>
        <el-form-item label="省份市" :label-width="formLabelWidth">
          <el-input v-model="editData.receiverprovince" autocomplete="off"></el-input>
        </el-form-item>



        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="editData.receiveraddress" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="收货人名字" :label-width="formLabelWidth">
          <el-input v-model="editData.receivername" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="editData.receiverphone" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <!--        图片上传-->
      <!--        这里的name是为了将文件上传默认file改成我们设置的image-->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveAddress">确 定</el-button>
    </div>

  </el-dialog>


  <!--    付款界面-->
  <el-dialog title="付款界面" :visible.sync="payDialogFormVisible"  :close-on-click-modal = "false">
    <div style="display: flex; justify-content: space-around;" >
      <el-form>
        <el-form-item label="总金额" :label-width="formLabelWidth">
          <el-input
                  v-model="totalPrice" disabled>
          </el-input>
        </el-form-item>

        <el-form-item label="支付方式" :label-width="formLabelWidth">
          <template>
            <el-select v-model="paymenttype" placeholder="请选择">
              <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="payDialogFormVisible = false">取 消</el-button>
      <el-button @click="saveOrder" type="danger">付 款</el-button>
    </div>

  </el-dialog>


</div>

</body>

<script>

  var v = new Vue({
    el : "#app",
    data : {
      num :"",
      Data :[],
      typesOption :[],
      clothingData  : [],
      clothingName : "服装",
      uid : "",
      tableData:[{proid:"",message:"",image:"",price:"",proname:""}],
      activeValue : 1,
      addressData : [],
      proid : "",
      editData : {receiverprovince:"",receiveraddress:"",receiverphone : "",receivername:""},
      dialogFormVisible : false,
      payDialogFormVisible : false,
      formLabelWidth:"100px",
      multipleSelection:"",
      totalPrice : "",
      amount : "",
      paymenttype:"微信支付",
      shoppingid :"",
      options: [{
        value: '微信支付',
        label: '微信支付'
      }, {
        value: '支付宝支付',
        label: '支付宝支付'
      }],

    },
    methods: {
      queryDefaultAddress(){
        axios.get("QueryDefaultAddressServlet.s",{
          params : {
            uid : this.uid,
          }
        }).then(res=>{
          this.shoppingid = res.data.shoppingid;
        })
      }
      ,
      saveOrder(){

        for (let map in this.tableData) {
          console.info(map);
          console.info(this.tableData);
          var params = new URLSearchParams();
          for (let name in this.tableData[map]){
            params.append(name, this.tableData[map][name]);
          }

          params.append("uid", this.uid);
          params.append("paymenttype",this.paymenttype);
          params.append("num",this.num);
          params.append("shoppingid",this.shoppingid);
          params.append("status","20");

          // 发送 ajax post 请求
          axios.post("SaveCardServlet.s", params).then(res=>{
            if (res.data.code == 1){
              this.$message(res.data.msg);
              this.remove1(params);
            } else{
              this.$alert(res.data.msg);
            }
          })

        }
        this.payDialogFormVisible = false; // 关闭弹窗
      },
      queryProductMessage(){
        axios.get("QueryByuProductServlet.s",{
          params :{
            proid : this.proid,
          }
        }).then(res=>{
          this.tableData = res.data;
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.count();
      },
      handleSelect(item) {
        console.log(item);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleChange(data) {
        // this.count();
      },
      createPay(){
        this.payDialogFormVisible = true;
      },
      create(){
        this.dialogFormVisible = true;
      },
      selectShoppingId(shoppingid){
        this.shoppingid = shoppingid;
        console.info(name);

      },

      getId(){
        //对获取的url进行解码
        var url  = decodeURI(location.search);
        let arr = [];// 存储参数的数组
        let res = {};// 存储最终JSON结果对象
        arr = url.split("?")[1].split("&");//获取地址栏的参数
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].indexOf("=")!=-1){
            let str = arr[i].split("=");
            res[str[0]] = str[1];
          }else{//参数中无值
            res[arr[i]]="";
          }
        }
        this.uid = res.uid;
        this.proid = res.proid;
        this.num = res.num;
        this.totalPrice = res.totalPrice;
      },
      queryAddress(){
        axios.get("QueryAddressServlet.s",{
          params:{
            uid : this.uid,
          }
        }).then(res=>{
          this.addressData = res.data;
        })
      },
      create(){
        this.dialogFormVisible = true;
      },
      saveAddress(){
        // 构建post参数
        var params = new URLSearchParams();

        for (let name in this.editData){
          params.append(name, this.editData[name]);
        }
        params.append("uid",this.uid);

        // 发送 ajax post 请求
        axios.post("AddAdressServlet.s", params).then(res=>{
          if (res.data.code == 1){
            this.$message(res.data.msg);
            this.queryAddress();// 刷新地址
            this.dialogFormVisible = false; // 关闭弹窗
          } else{
            this.$alert(res.data.msg);
          }
        })
      },



    },
    created() {
      this.getId();
      this.queryAddress();
      this.queryProductMessage();
      this.queryDefaultAddress();
    },

  })
</script>
</html>